<template>
  <div id="answer-list">
    <div class="search-warp">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input
            style="width: 200px" 
            v-decorator="[
              'userId',
            ]"
            placeholder="答题人"
            allowClear
          >
          </a-input>
        </a-form-item>
        <a-form-item >
          <a-select 
            style="width: 200px" 
            placeholder="模板名称"
            v-decorator="[
              'templateId',
            ]"
            allowClear
          >
            <a-select-option v-for="item in templateData" :key="item.value" :value="item.value">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">
            查询
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      class="table-warp"
      :columns="columns"
      :row-key="record => record.id"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="action" slot-scope="record"> 
        <a @click="() => handlePreview(record)">详情</a>
      </template>
    </a-table>
  </div>
</template>
<script>
import Api from '@/services/commonApi'
import moment from 'moment'
const columns = [
  {
    title: '模板标题',
    dataIndex: 'titleName',
    sorter: true,
    width: '20%',
  },
  {
    title: '答题人',
    dataIndex: 'userName',
  },
  {
    title: '答题时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];

export default {
  data() {
    return {
      data: [],
      pagination: {
        pageSize: 10,
        current: 1
      },
      loading: false,
      columns,
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
      templateData: [],
      params: {}
    };
  },
  mounted() {
    this.fetch();
    this.getTemplateData();
  },
  components: {
    // 'q-preview': Preview
  },
  methods: {
    /**
     * @Description: 获取模板信息
     * @param {*}
     * @Date: 2020-11-11 09:16:24
     */    
    getTemplateData() {
      Api.post('app/center/inner/template/pageTemplate', {
        size: 20,
        current: 1,
      }).then(res => {
        this.templateData = res.data.data.templateVos.map(item => {
          return {
            name: item.titleName,
            value: item.id
          }
        })
      })
    },

    /**
     * @Description: 搜索
     * @param {*}
     * @Date: 2020-11-11 09:07:48
     */    
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, value) => {
        console.log('value', value)
        this.params = value
        this.fetch()
      })
    },

    /**
     * @Description: 预览
     * @param {*}
     * @Date: 2020-11-02 13:27:42
     */    
    handlePreview(val) {
      this.$router.push({path: '/answer/detail', query:{templateId: val.templateId, userId: val.userId}})
    },

    /**
     * @Description: 预览手机版
     * @param {*}
     * @Date: 2020-11-02 13:28:10
     */    
    showPhoneStyle() {
      this.isPc = false
      this.isActive = false
    },

    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch() {
      this.loading = true;
      Api.post('app/center/inner/answer/pageAnswer', {
        pageModel: {
          "size": this.pagination.pageSize,
          "current": this.pagination.current,
        },
        ...this.params
      })
      .then(data => {
        const pagination = { ...this.pagination };

        // Read total count from server
        // pagination.total = data.totalCount;
        // pagination.total = data.data.count;
        this.loading = false;
        // console.log(data.data.data.answerVos)
        if(!data.data.data.answerVos.length) {
          return this.data = []
        }
        this.data = data.data.data.answerVos.map(item => {
          item.userName = item.userId
          item.id = item.createTime
          item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          return item
        })
        this.pagination = pagination;
      });
    },
  },
};
</script>

<style lang="less">
  #answer-list {
    // background-color: #fff;
    padding: 20px;
    .search-warp {
      height: 50px;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding-left: 20px;
      margin-bottom: 20px;
      border-radius: 5px;
    }

    .table-warp {
      background-color: #fff;
      border-radius: 5px;
    }
    
  }
</style>
